<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-yellow sidebar-mini">
<!--导入模态框-->
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-import-plan" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Excel信息导入</h4>
            </div>
            <div class="modal-body">
                <form id="importForm">
                    <div class="form-group">
                        <label>模版</label>
                        <a class="out" th:href="@{/file/发货清单明细模板.xlsx}">点击下载</a>
                    </div>
                    <div class="form-group">
                        <label>选择Excel文件并上传</label>
                        <input id="import-file" class="btn" type="file" name="file">
                        <p class="help-block">请按模板格式进行导入，信息与模板信息对应。</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-import" type="button" class="btn btn-success">
                    <span class="Bold">确定</span>
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<section class="content-header">
    <div id="toolbar" class="form-inline">
        <a id="btn_notRead" href="javascript:void(0);"
           class="btn btn-info pull-right" style="margin-right: 10px" onclick="saveAll()">
            <span class="Bold">保存</span>
        </a>
    </div>
    <a href="javascript:void(0);" class="btn btn-success pull-right" style="margin-right: 10px"
       onclick="js.modal.open('modal-import-plan')">
        <span class="Bold">导入</span>
    </a>
    <h1></h1>
</section>
<section class="content">
    <div class="box-body"  style="margin-top: 50px">
        <form id="sheetForm" class="form-horizontal bg-white">
            <div class="col-xs-11 col-xs-offset-1">
                <table class="t1 t3" id="hoursTable">
                    <thead>
                    <input id="id"  name="id" th:value="${instShipmentsList.id}" hidden>
                    <tr>
                        <td colspan="8">
                            <img th:src="@{/img/logo3.jpg}" width="64px" height="40px" style="margin-top: -20px">
                            <div style="display: inline-block;margin-top: 5px;margin-left: 20px">
                                <span style="letter-spacing: 24px;display: block;line-height: 20px">&nbsp;辽宁忠旺机械设备制造有限公司</span>
                                <span style="display: block;font-size: 12px;line-height: 20px">Liaoning Zhongwang Machinery Equipment Manufacturing Co., Ltd</span>
                            </div>
                        </td>
                        <td colspan="3"  style="width: 20%;font-size: 20px;">发货明细表</td>
                        <td ></td>
                    </tr>
                    <tr>
                        <td style="width: 10%">发货人及电话</td>
                        <td colspan="2" style="width: 15%;font-size: 14px;">
                            <input id="consignor" class="form-control" name="consignor" th:value="${instShipmentsList.consignor}">
                        </td>
                        <td style="width: 10%">发货地址</td>
                        <td colspan="2" style="width: 15%;font-size: 14px;">
                            <input id="setAddress" class="form-control" name="setAddress"  th:value="${instShipmentsList.setAddress}">
                        </td>
                        <td style="width: 7%">发货编号</td>
                        <td colspan="2" style="width: 8%;font-size: 14px;">
                            <input id="orderform" class="form-control" name="orderform" th:value="${instShipmentsList.orderform}">
                        </td>
                        <td colspan="1"  style="width: 8%">表单编号</td>
                        <td colspan="1" style="width: 15%;font-size: 14px;">
                            <input id="formNo" class="form-control" name="formNo"  th:value="${instShipmentsList.formNo}">
                        </td>
                        <td ></td>
                    </tr>
                    <tr>
                        <td style="width: 10%">收货人及电话</td>
                        <td colspan="2" style="width: 15%;font-size: 14px;">
                            <input id="consignee" class="form-control" name="consignee"  th:value="${instShipmentsList.consignee}">
                        </td>
                        <td style="width: 10%">收货地址</td>
                        <td colspan="2" style="width: 15%;font-size: 14px;">
                            <input id="getAddress" class="form-control" name="getAddress"  th:value="${instShipmentsList.getAddress}">
                        </td>
                        <td style="width: 8%">司机电话</td>
                        <td colspan="2" style="width: 10%;font-size: 14px;">
                            <input id="driverName" class="form-control" name="driverName"  th:value="${instShipmentsList.driverName}">
                        </td>
                        <td colspan="1"  >车牌号</td>
                        <td colspan="1" style="width: 15%;font-size: 14px;">
                            <input id="driverNum" class="form-control" name="driverNum"  th:value="${instShipmentsList.driverNum}">
                        </td>
                        <td ></td>
                    </tr>
                    <tr>
                        <td style="width: 10%">开票名头</td>
                        <td colspan="2" style="width: 15%;font-size: 14px;">
                            <input id="invoice" class="form-control" name="invoice"  th:value="${instShipmentsList.invoice}">
                        </td>
                        <td style="width: 10%">项目名称</td>
                        <td colspan="2" style="width: 15%;font-size: 14px;">
                            <input id="proName" class="form-control" name="proName"  th:value="${instShipmentsList.proName}">
                        </td>
                        <td style="width: 10%">发货日期</td>
                        <td colspan="2" style="width: 10%;font-size: 14px;">
                            <input class="form-control datepicker" name="setTime" type="text"  th:value="${#dates.format(instShipmentsList.setTime, 'yyyy-MM-dd')}"
                                   readonly/>
                        </td>
                        <td style="width: 8%">挂车种类</td>
                        <td colspan="1" style="width: 15%;font-size: 14px;">
                            <input id="trailer" class="form-control" name="trailer"  th:value="${instShipmentsList.trailer}">
                        </td>
                        <td ></td>
                    </tr>
                    <tr>
                        <td style="width: 7%">序号</td>
                        <td colspan="2" style="width: 15%">零件名称</td>
                        <td colspan="2" style="width: 15%">型号</td>
                        <td colspan="2" style="width: 15%">项目名称</td>
                        <td  style="width: 5%">数量</td>
                        <td  style="width: 5%">单位</td>
                        <td colspan="2" style="width: 20%">备注</td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody id="out">
                    <tr orderNum="orderNum" th:each="instShipmentsDetail : ${instShipmentsDetails}" >
                        <td beforeTdOrdernum="beforeTdOrdernum" th:text="${instShipmentsDetailStat.count}">1</td>
                        <td colspan="2" style="width: 15%">
                            <input type="text" class="form-control" name="drawName"  th:value="${instShipmentsDetail.drawName}" autocomplete="off">
                        </td>
                        <td colspan="2" style="width: 15%">
                            <input type="text" class="form-control" name="drawNo"  th:value="${instShipmentsDetail.drawNo}" autocomplete="off">
                        </td>
                        <td  colspan="2" style="width: 15%">
                            <input type="text" class="form-control" name="prodName" th:value="${instShipmentsDetail.prodName}" autocomplete="off">
                        </td>
                        <td  style="width: 5%">
                            <input type="number" class="form-control" name="drawNum" th:value="${instShipmentsDetail.drawNum}" autocomplete="off">
                        </td>
                        <td  style="width: 5%">
                            <input type="text" class="form-control" name="unit" th:value="${instShipmentsDetail.unit}" autocomplete="off">
                        </td>
                        <td colspan="2" style="width: 20%">
                            <input type="text" class="form-control" name="remark" th:value="${instShipmentsDetail.remark}" autocomplete="off">
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="row" style="font-size: 14px;line-height: 200%;">
                    <div class="col-xs-7" style="padding-left: 0;font-size: 12px">注：签收后如有任何问题请在72小时之内联系发货人，逾期将视为无任何问题。</div>
                    <div class="col-xs-3" style="font-size: 12px">确认签字：</div>
                </div>
            </div>
        </form>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    let table, table1, table2;

    /** 保存 */
    function saveAll() {
        let res = js.vd({
            id: 'sheetForm',
            notEmpty: ['formNo', 'invoice', 'consignor', 'setAddress', 'driverName', 'driverNum'
                , 'orderform', 'proName', 'consignee', 'getAddress', 'trailer', 'setTime','prodName']
        })
        if (!res) {
            return;
        }
        var url = ctx + "shipments/listDetailEdit";
        js.validSubmit({
            formId: "sheetForm",
            url: url,
            data: new FormData($("#sheetForm")[0]),
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    location.href= ctx +"shipments/comit";
                } else {
                    js.modal.warning(result.msg);
                }
            }
        });
    }

    $(function () {

    });
    /** 添加一行 */
    $("#sheetForm").on('click', '.out-add', function () {
        $(this).parents("tr").after(`
                    <tr orderNum="orderNum">
                        <td beforeTdOrdernum="beforeTdOrdernum">1</td>
                        <td  colspan="2" style="width: 15%">
                            <input type="text" class="form-control" name="drawName" autocomplete="off">
                        </td>
                        <td colspan="2" style="width: 16%">
                            <input type="text" class="form-control" name="drawNo" autocomplete="off">
                        </td>
                        <td colspan="2" style="width: 18%">
                            <input type="text" class="form-control" name="proName" autocomplete="off">
                        </td>
                        <td  style="width: 5%">
                            <input type="number" class="form-control" name="drawNum" autocomplete="off">
                        </td>
                        <td  style="width: 5%">
                            <input type="text" class="form-control" name="unit" autocomplete="off">
                        </td>
                        <td colspan="2" style="width: 20%">
                            <input type="text" class="form-control" name="remark" autocomplete="off">
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
            `);
        beforeCompuTrNoH();
    });
    /** 删除行 */
    $('#sheetForm').on('click', '.out-del', function () {
        $(this).parents("tr").remove();
        if ($("table tbody tr").length === 0) {
            $("#out").append(`
                    <tr orderNum="orderNum">
                        <td beforeTdOrdernum="beforeTdOrdernum">1</td>
                        <td colspan="2" style="width: 15%">
                            <input type="text" class="form-control" name="drawName" autocomplete="off">
                        </td>
                        <td  colspan="2" style="width: 16%">
                            <input type="text" class="form-control" name="drawNo" autocomplete="off">
                        </td>
                        <td colspan="2" style="width: 18%">
                            <input type="text" class="form-control" name="proName" autocomplete="off">
                        </td>
                        <td style="width: 5%">
                            <input type="number" class="form-control" name="drawNum" autocomplete="off">
                        </td>
                        <td style="width: 5%">
                            <input type="text" class="form-control" name="unit" autocomplete="off">
                        </td>
                        <td colspan="2" style="width: 20%">
                            <input type="text" class="form-control" name="remark" autocomplete="off">
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
                   `)
        }
        beforeCompuTrNoH();
    });
    /** 导入 */
    $('#btn-import').click(function () {

        let files = $("#import-file")[0].files;
        // let files = e.target.files;
        let fileReader = new FileReader();
        fileReader.onload = function (ev) {
            try {
                let data = ev.target.result,
                    workbook = XLSX.read(data, {type: 'binary'}), // 以二进制流方式读取得到整份excel表格对象
                    plans = []; // 存储获取到的数据
                // 遍历每张表读取
                for (let sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        plans = plans.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                        break; // 只取第一张表
                    }
                }
                if (plans.length === 0) {
                    js.modal.alert("无法读取文件内容");
                } else {
                    $("#out").empty();
                    plans.forEach((value, index) => {
                        $("#out").append(`
                                 <tr orderNum="orderNum">
                                     <td beforeTdOrdernum="beforeTdOrdernum">1</td>
                        <td colspan="2" style="width: 15%">
                            <input type="text" class="form-control" name="drawName" value="${value['零件名称']}" autocomplete="off">
                        </td>
                        <td colspan="2" style="width: 16%">
                            <input type="text" class="form-control" name="drawNo" value="${value['型号']}" autocomplete="off">
                        </td>
                        <td colspan="2" style="width: 18%">
                            <input type="text" class="form-control" name="proName"  value="${value['项目名称']}" autocomplete="off">
                        </td>
                        <td style="width: 5%">
                            <input type="number" class="form-control" name="drawNum"  value="${value['数量']}" autocomplete="off">
                        </td>
                        <td style="width: 5%">
                            <input type="text" class="form-control" name="unit"  value="${value['单位']}" autocomplete="off">
                        </td>
                        <td colspan="2" style="width: 20%">
                            <input type="text" class="form-control" name="remark"  value="${value['备注']}" autocomplete="off">
                        </td>
                                    <td>
                                        <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                                        <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                                    </td>
                                </tr>
                            `);
                    });
                    beforeCompuTrNoH();
                    js.modal.hide("modal-import-plan");
                }
            } catch (e) {
                js.modal.alert("无法读取文件或文件类型有错误");
            }
        };
        // 以二进制方式打开文件
        fileReader.readAsBinaryString(files[0]);
    });
    /** tr表格变更后的序号的计算*/
    function beforeCompuTrNoH() {
        $("table  tr[orderNum='orderNum']").each(function (i, e) {
            $(this).children("td[beforeTdOrdernum='beforeTdOrdernum']").text(i + 1);
        })
    }
</script>
</body>
</html>